<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>湖南省自来水公司营销管理信息系统</title>

    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">
    <style type="text/css">
        .reportDiv {
            padding: 10px 40px;
        }

        table.report thead th {
            background-color: #CCCCCC;
        }

        .split {
            background-color: #ccc;
        }

        table.report tfoot td {
            padding: 0px;
        }

        table.report tfoot td div {
            margin: 0px;
            overflow: hidden;
            width: 80px;
        }
    </style>
    <script src="/js/vue.3.js"></script>
    <script src="/js/axios.js"></script>
</head>

<body>
<div id="app">

    <div id="wrapper">

        <div id="header">

            <div class="content_pad">
                <h1><a href="../workspace.html">湖南省自来水公司营销管理信息系统</a></h1>

                <ul id="nav">

                    <li class="nav_dropdown nav_icon">
                        <a href="javascript:;"><span class="ui-icon ui-icon-wrench"></span>业扩工程</a>

                        <div class="nav_menu">
                            <ul>
                                <li><a href="../page/be__request.html">01 用户申请</a></li>
                                <li><a href="../page/be__audit.html">02 初步审核</a></li>
                                <li><a href="../page/be__pay.html">03 交施工费</a></li>
                                <li><a href="../page/be__billclear.html">04 水费清算</a></li>
                                <li><a href="../page/be__contract.html">05 供水协议</a></li>
                                <li><a href="../page/be__working.html">06 施工竣工</a></li>
                                <li><a href="../page/be__open.html">07 通水停水</a></li>
                                <li><a href="../page/be__save.html">08 档案存档</a></li>
                                <li><a href="../page/be_order.html">工单管理</a></li>
                                <li><a href="../page/be_abort.html">终止工单</a></li>
                                <li><a href="../page/be_reportProgress.html">业扩工程进度</a></li>
                                <li><a href="../page/be_reportMoney.html">业扩收费报表</a></li>
                            </ul>

                        </div>
                    </li>

                    <li class="nav_dropdown nav_icon">
                        <a href="javascript:;"><span class="ui-icon ui-icon-person"></span>用户管理</a>

                        <div class="nav_menu">
                            <ul>
                                <li><a href="../page/user_search.html">用户查询</a></li>
                                <li><a href="../page/user_add.html">快捷新户</a></li>
                                <li><a href="../page/user_changeName.html">快捷过户</a></li>
                                <li><a href="../page/user_changeBank.html">快捷代扣</a></li>
                                <li><a href="../page/user_changeMeter.html">快捷换表</a></li>
                                <li><a href="../page/user_changeFormula.html">快捷重签</a></li>
                                <li><a href="../page/user_delete.html">快捷销户</a></li>
                                <li><a href="../page/user_reportShortcut.html">快捷操作记录</a></li>
                                <li><a href="../page/user_docNum.html">档案号管理</a></li>
                                <li><a href="../page/user_sendMsg.html">短信群发</a></li>
                            </ul>

                        </div>
                    </li>

                    <li class="nav_dropdown nav_icon">
                        <a href="javascript:;"><span class="ui-icon ui-icon-pencil"></span>抄表管理</a>

                        <div class="nav_menu">
                            <ul>
                                <li><a href="../page/rd_volume.html">表册管理</a></li>
                                <li><a href="../page/rd_init.html">抄表初始化</a></li>
                                <li><a href="../page/rd_task.html">任务分配</a></li>
                                <li><a href="../page/rd_enter.html">抄表录入</a></li>
                                <li><a href="../page/rd_audit.html">抄表审核</a></li>
                                <li><a href="../page/rd_reportReading.html">抄表情况查询</a></li>
                                <li><a href="../page/rd_reportVolumeReading.html">抄表统计报表</a></li>
                                <li><a href="../page/rd_reportZero.html">零吨位用户查询</a></li>
                                <li><a href="../page/rd_reportMaxValue.html">最大码值修正记录</a></li>
                                <li><a href="../page/rd_reportCPreAmount.html">底码修正记录</a></li>
                                <li><a href="../page/rd_reportMeterCheck.html">水表周检报表</a></li>
                            </ul>

                        </div>
                    </li>

                    <li class="nav_dropdown nav_icon">
                        <a href="javascript:;"><span class="ui-icon ui-icon-star"></span>收费管理</a>

                        <div class="nav_menu">
                            <ul>
                                <li><a href="../page/pay_window.html">窗口收费</a></li>
                                <li><a href="../page/pay_batch.html">批量收费</a></li>
                                <li><a href="../page/pay_invoiceReprint.html">发票补开/作废</a></li>
                                <li><a href="../page/pay_reportDebts.html">欠费报表</a></li>
                                <li><a href="../page/pay_reportPay.html">收费情况报表</a></li>
                                <li><a href="../page/pay_reportMonthRecycle.html">月资金回收情况报表</a></li>
                                <li><a href="../page/pay_reportBalance.html">用户预收情况报表</a></li>
                                <li><a href="../page/pay_reportWaterType.html">各类用水统计总表</a></li>
                            </ul>

                        </div>
                    </li>

                    <li class="nav_dropdown nav_icon">
                        <a href="javascript:;"><span class="ui-icon ui-icon-script"></span>发票管理</a>

                        <div class="nav_menu">
                            <ul>
                                <li><a href="../page/inv_invoiceManage.html">发票总表</a></li>
                                <li><a href="../page/inv_invoiceIn.html">发票入库</a></li>
                                <li><a href="../page/inv_invoiceOut.html">发票出库</a></li>
                                <li><a href="../page/inv_invoiceArchive.html">发票交票</a></li>
                                <li><a href="../page/inv_invoiceReportOut.html">发票出库情况查询</a></li>
                                <li><a href="../page/inv_invoiceReportEmp.html">收费人员发票查询</a></li>
                                <li><a href="../page/inv_invoiceReportArchive.html">发票交票情况查询</a></li>
                                <li><a href="../page/inv_invoiceReportUse.html">发票使用情况查询</a></li>
                                <li><a href="../page/inv_invoiceReportMoneySum.html">销账汇总报表</a></li>
                                <li><a href="../page/inv_invoiceReportMoneyDetail.html">销账明细报表</a></li>
                            </ul>
                        </div>
                    </li>

                    <li class="nav_dropdown nav_icon">
                        <a href="javascript:;"><span class="ui-icon ui-icon-gear"></span>系统设置</a>

                        <div class="nav_menu">
                            <ul>
                                <li><a href="../page/sys_area.html">抄表辖区</a></li>
                                <li><a href="../page/sys_meterType.html">水表型号</a></li>
                                <li><a href="../page/sys_dept.html">部门管理</a></li>
                                <li><a href="../page/sys_emp.html">员工管理</a></li>
                                <li><a href="../page/sys_menupower.html">菜单权限设置</a></li>
                                <li><a href="../page/sys_areapower.html">辖区权限设置</a></li>
                                <li><a href="../page/sys_waterType.html">用水类型设定</a></li>
                                <li><a href="../page/sys_surcharge.html">附加费设定</a></li>
                                <li><a href="../page/sys_flow.html">流程配置</a></li>
                            </ul>

                        </div>
                    </li>

                    <li class="nav_current nav_dropdown nav_icon_only">
                        <a href="javascript:;">&nbsp;</a>

                        <div class="nav_menu">
                            <ul>
                                <li><a href="../workspace.html">我的工作台</a></li>
                                <li><a href="../page/sys_pwd.html">修改密码</a></li>
                                <li><a href="../login.html">退出系统</a></li>
                            </ul>
                        </div> <!-- .menu -->
                    </li>
                </ul>
            </div> <!-- .content_pad -->

        </div> <!-- #header -->

        <div id="masthead">
            <div>
                <span id="pagetitle"><a href="javascript:;">销账明细报表</a></span>
                <span id="welcome_span">欢迎回来，{{userName}}</span>
            </div>
        </div> <!-- #masthead -->

        <div id="content" class="xgrid">
            <div class="x12" style=" margin-bottom:0px;">
                <h2>销账明细报表</h2>
                <div class="searchDiv">
                    <div>
                        是否交票 <select v-model="this.map.archived">
                        <option value="1">已交票</option>
                        <option value="0">未交票</option>
                        <option value="">所有</option>
                    </select>


                        销账情况 <select>
                        <option>部分或完全销账</option>
                        <option>完全销账</option>
                        <option>尚未销账</option>
                        <option>所有</option>
                    </select>

                        发票类型 <select v-model="this.map.invoiceType">
                        <option value="">所有</option>
                        <option value="0">普通发票</option>
                        <option value="1">增值税发票</option>
                    </select>

                        <button class="btn btn-small btn-icon btn-find" @click.prevent="load()"><span></span>查询
                        </button>
                        <button class="btn btn-small btn-icon btn-star btn-blue" @click.prevent="excel()"><span></span>
                            导出到Excel文件
                        </button>
                    </div>
                    <div>
                        <div style="float:left;width:298px;">
                            发票号码 <span class="between">
							<input id="t_invoice1" v-model="this.map.startNo"/>
							<input type="checkbox" id="ck_invoice_between" class="checkbox"
                                   onclick="$('#t_invoice2').toggle();"/>
							<label for="ck_invoice_between">至</label>
							<input id="t_invoice2" class="hide" v-model="this.map.endNo"/>
						</span>
                        </div>

                        <div style="float:left;width:298px;">
                            收费日期 <span class="between">
							<input id="t_paydate1" style="width: 100px" type="date" v-model="this.map.startDate"/>
							<input type="checkbox" id="ck_paydate_between" class="checkbox"
                                   onclick="$('#t_paydate2').toggle();"/>
							<label for="ck_paydate_between">至</label>
							<input id="t_paydate2" style="width: 100px" type="date" v-model="this.map.endDate"
                                   class="hide"/>
						</span>
                        </div>

                        <div style="float:left;width:298px;">
                            销账日期 <span class="between">
							<input id="t_xzdate1" style="width: 70px" type="date" v-model="this.map.balanceStartDate"/>
							<input type="checkbox" id="ck_xzdate_between" class="checkbox"
                                   onclick="$('#t_xzdate2').toggle();"/>
							<label for="ck_xzdate_between">至</label>
							<input id="t_xzdate2" style="width: 70px" type="date" v-model="this.map.balanceEndDate"
                                   class="hide"/>
						</span>
                        </div>
                    </div>
                </div>
            </div> <!-- .x12 -->
        </div> <!-- #content -->

        <div class="reportTitle">
            销账明细报表
        </div>

        <div class="reportDiv" style="width:2080px;">
            <table class="report" style="width:2080px;">
                <thead>
                <th width="160">交费单号</th>
                <th width="80">发票号</th>
                <th width="80">发票类型</th>
                <th width="80">交费日期</th>
                <th width="80">交费金额</th>
                <th width="80">已用金额</th>
                <th width="80">剩余金额</th>
                <th width="80">收费员</th>
                <th width="80">生活用水量</th>
                <th width="80">商业用水量</th>
                <th width="80">工业用水量</th>
                <th width="80">行政用水量</th>
                <th width="80">军区用水量</th>
                <th width="80">特种用水量</th>
                <th width="80">销账总水量</th>
                <th width="80">生活用水销账</th>
                <th width="80">商业用水销账</th>
                <th width="80">工业用水销账</th>
                <th width="80">行政用水销账</th>
                <th width="80">军区用水销账</th>
                <th width="80">特种用水销账</th>
                <th width="80">垃圾费销账</th>
                <th width="80">污水费销账</th>
                <th width="80">资源费销账</th>
                <th width="80">销账总金额</th>
                </thead>
                <tbody>
                <tr v-for="i in totaldetailInfo">
                    <td align="center" v-text="i.PayNo">JF0100000987-201401-02</td>
                    <td align="center" v-text="i.InvoiceNo">12345678</td>
                    <td align="center" v-if="i.InvoiceType==0">普通发票</td>
                    <td align="center" v-else>增值税发票</td>
                    <td align="center" v-text="i.PayDate">2014-01-23</td>
                    <td align="right" v-text="i.totalpay">12345.67</td>
                    <td align="right" v-text="i.totaluse">12345.67</td>
                    <td align="right" v-text="i.totalpay-i.totaluse">12345.67</td>
                    <td align="center" class="split" v-text="i.EmpName">司徒收菲</td>
                    <td align="right" v-text="i.shAmount">12345</td>
                    <td align="right" v-text="i.syAmount">12345</td>
                    <td align="right" v-text="i.gyAmount">12345</td>
                    <td align="right" v-text="i.xzAmount">12345</td>
                    <td align="right" v-text="i.jqAmount">12345</td>
                    <td align="right" v-text="i.tzAmount">12345</td>
                    <td align="right" class="split" v-text="i.totalamount">12345.67</td>
                    <td align="right" v-text="i.shMoney">12345.67</td>
                    <td align="right" v-text="i.syMoney">12345.67</td>
                    <td align="right" v-text="i.gyMoney">12345.67</td>
                    <td align="right" v-text="i.xzMoney">12345.67</td>
                    <td align="right" v-text="i.jqMoney">12345.67</td>
                    <td align="right" v-text="i.tzMoney">12345.67</td>
                    <td align="right" v-text="i.ljfMoney">123.45</td>
                    <td align="right" v-text="i.wsfMoney">123.45</td>
                    <td align="right" v-text="i.zyfMoney">123.45</td>
                    <td align="right" class="split" v-text="i.totalbalance">1234567.89</td>
                </tr>


                </tbody>

            </table>
        </div>
        <div class="xgrid">
            <div class="page">
                <a href="#" @click.prevent="this.map.pageNum=1;load()">第一页</a>
                <a href="#" @click.prevent="this.map.pageNum=this.map.pageNum-1;load()">上一页</a>
                <input class="pageIndex" v-model="this.map.pageNum"/> / <input class="pageCount" readonly="readonly"
                                                                               v-model="this.page.pages"/>
                <a href="#" @click.prevent="this.map.pageNum=this.map.pageNum+1;load()">下一页</a>
                <a href="#" @click.prevent="this.map.pageNum=this.page.pages;load()">第未页</a>
            </div>
        </div>

        <div id="footer">
            <div class="content_pad">
                <p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>. 技术支持 <a href="#">职业教育</a>.</p>
            </div> <!-- .content_pad -->
        </div> <!-- #footer -->

    </div> <!-- #wrapper -->

</div>
<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>
<script src="../My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        Dashboard.init();

    });


</script>
<script>
    var app = Vue.createApp({
        data() {
            return {
                userName: JSON.parse(sessionStorage.getItem("user")).empName,
                map: {
                    "archived": "",
                    "invoiceType": "",
                    "startNo": "",
                    "endNo": "",
                    "startDate": "",
                    "endDate": "",
                    "balanceStartDate": "",
                    "balanceEndDate": "",
                    "pageNum":1
                },
                page:{

                },
                totaldetailInfo: [],
            }
        }, methods: {
            load() {
                axios.post('/ivInvoice/invoiceReportMoneyDetail', this.map).then(ret => {
                    this.totaldetailInfo = ret.data.data.records;
                    this.page = ret.data.data;
                    this.map.pageNum = ret.data.data.current;
                    console.log(this.totaldetailInfo);
                })
            },
            // excel(){
            //     axios.post('/excel/export/invoiceReportMoneyDetail', this.totaldetailInfo).then(ret => {
            //
            //     })
            // }
            excel(){
                axios({

                    method: 'post',

                    url:'/excel/export/invoiceReportMoneyDetail',

                    responseType: 'blob',
                    data: this.totaldetailInfo
                })
                    .then(res => {

                            const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) || '.xls'

                            const blob = new Blob([res.data], {

                                type: 'application/octet-stream'

                            })

                            let url = window.URL.createObjectURL(blob);

                            let link = document.createElement('a');

                            link.style.display = 'none';

                            link.href = url;

                            link.setAttribute('download', filename);

                            document.body.appendChild(link);

                            link.click()
                        }
                    )

            }
        }, mounted() {
            this.load();
        },

    });
    app.mount("#app");
</script>
</body>

</html>